<template>
  <el-dialog title="新增菜品" :visible.sync="insZt">
    <el-form :model="form">
      <el-form-item label="名字" :label-width="formLabelWidth">
        <el-input v-model="form.food_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="价格" :label-width="formLabelWidth">
        <el-input v-model="form.food_price" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="图片">
        <el-upload
          class="avatar-uploader"
          action
          :auto-upload="false"
          ref="myupload"
          :http-request="tiJiaoImg"
          list-type="picture-card"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="form.food_type" placeholder="请选择新增类型">
          <el-option label="炒菜" value="烧菜"></el-option>
          <el-option label="凉菜" value="凉菜"></el-option>
          <el-option label="烧菜" value="烧菜"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="tijiaoBd">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as api from "../utils/api";
export default {
  name: "djlInsert",
  props: ["insZt"],
  data() {
    return {
      imageUrl: "",
      dialogTableVisible: false,
      form: {
        food_name: "",
        food_price: "",
        food_type: "",
      },
      formLabelWidth: "120px",
      imgData: {},
    };
  },
  methods: {
    close() {
      console.log(12);
      this.$emit("insClose");
    },
    tiJiaoImg(content) {
      let djlform = new FormData();
      djlform.append("uploadImg", content.file);
      djlform.append("food_name", this.form.food_name);
      djlform.append("food_price", this.form.food_price);
      djlform.append("food_type", this.form.food_type);

      this.axios({
        method: "post",
        url: api.DJLADDFOOD,
        data: djlform,
      })
        .then((data) => {
          if (data.data.code === 200) {
            console.log(data.data);
            this.$message({
              message: "添加成功",
              type: "success",
            });
            //上传成功应该重新调用加载新数据的方法
            this.$emit('selectData')
          } else {
            this.$message({
              message: "添加失败，请稍后重试",
              type: "warning",
            });
            this.$emit('selectData')
          }
          this.imageUrl = "";
        })
        .catch((err) => {
          console.log(err);
          this.$emit("insClose");
        });

      this.$emit("insClose");
      this.$emit("jiazai");
      
      this.form = {};
    },
    tijiaoBd() {
      // 调用upload组件的提交方法
      this.$refs.myupload.submit();
    },
  },
};
</script>
